<template>
	<div class="card">
		<div class="card__header">
			<span class="label">{{ $t('代理总览') }}</span>

			<!-- <cl-select-button v-model="type" :options="options.type" small /> -->
		</div>

		<div class="card__container">
			<cl-crud ref="Crud" padding="0">

				<cl-row>
					<!-- 刷新按钮 -->
					<cl-refresh-btn />

					<cl-filter label="订单时间">
						<cl-date-picker type="daterange" />
					</cl-filter>


					<!-- 筛选 -->
					<cl-filter label="商户筛选">
						<!-- 配置prop，选择后会自动过滤列表 -->
						<cl-select :options="allAgent" prop="merchantId" :width="200" />
					</cl-filter>


					<cl-flex1 />
				</cl-row>

				<cl-table :summary-method="getSummaries"  show-summary ref="Table" />
			</cl-crud>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useCrud, useTable } from '@cool-vue/crud';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { service } from '/@/cool';

const { t } = useI18n();

function getSummaries() {
	return [
		'合计',
		Table.value?.data.reduce((a, b) => {
			return a + (b.orderCount * 1)
		}, 0

		), Table.value?.data.reduce((a, b) => {
			return a + (b.totalAmount * 1 / 100)
		}, 0

		)];
}
 

// 所有代理
const allAgent = ref<any[]>([]);

 

const getAgentList = async () => {
	const children = await service.user.info.list({
		role: 1
	});

	allAgent.value = children?.map(_c => {
		return {
			label: `${_c.nickName ?? '-'} (手机号：${_c.phone})`,
			value: _c.id
		};
	});
};
 

getAgentList()



// 类型
const type = ref('day');

// 选项，统一命名options，存放所有的下拉等其他选项列表数据
const options = reactive({
	status: [
		{
			label: '启用',
			value: 1
		},
		{
			label: '禁用',
			type: 'danger',
			value: 0
		}
	]
});


const Crud = useCrud(
	{
		service: service.base.sys.info,
		dict: {
			api: {
				page: "agentOrderStatistics",
			},
		}
	},
	app => {
		app.refresh();
	},

);



const Table = useTable({
	autoHeight: false,
	contextMenu: ['order-asc', 'order-desc'],
	columns: [
		{
			label: t('代理'),
			prop: 'nickName',
			minWidth: 120
		},
		{
			label: t('订单数'),
			prop: 'orderCount',
			minWidth: 100
		},
		{
			label: t('订单金额'),
			prop: 'totalAmount',
			minWidth: 100,
			sortable: true,
			formatter(row) {
				return row.totalAmount / 100;
			}
		},
		{
			label: t('设备总数'),
			prop: 'deviceStats.total',
			minWidth: 100,
			sortable: true,
		},
		{
			label: t('在线设备数'),
			prop: 'deviceStats.online',
			minWidth: 100,
			sortable: true,
		},
		{
			label: t('离线设备数'),
			prop: 'deviceStats.offline',
			minWidth: 100,
			sortable: true,
		},

	],
});
</script>

<style lang="scss" scoped>
.card {
	padding-bottom: 20px;
}
</style>
